```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>本地搭建私募问答智能体 | 技术小馆</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css">
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            color: #1f2937;
            line-height: 1.6;
        }
        .hero-gradient {
            background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
        }
        .feature-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        .highlight {
            position: relative;
            z-index: 1;
        }
        .highlight:after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 30%;
            background-color: rgba(79, 70, 229, 0.2);
            z-index: -1;
            transition: height 0.3s ease;
        }
        .highlight:hover:after {
            height: 50%;
        }
        .drop-cap:first-letter {
            float: left;
            font-size: 4.5rem;
            line-height: 0.8;
            margin-right: 1rem;
            font-weight: bold;
            color: #4f46e5;
        }
        .timeline-item:before {
            content: '';
            position: absolute;
            left: -1.5rem;
            top: 0;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: #4f46e5;
        }
        .timeline-connector {
            position: absolute;
            left: -1.5rem;
            top: 12px;
            bottom: -1.5rem;
            width: 2px;
            background: #e5e7eb;
        }
        .code-block {
            background: #1e293b;
            border-radius: 0.5rem;
            overflow: hidden;
        }
        .code-header {
            background: #0f172a;
            padding: 0.5rem 1rem;
            color: #94a3b8;
            font-size: 0.875rem;
            display: flex;
            justify-content: space-between;
        }
    </style>
</head>
<body class="bg-gray-50">
    <!-- Hero Section -->
    <section class="hero-gradient text-white py-20">
        <div class="container mx-auto px-6 max-w-5xl">
            <div class="flex flex-col md:flex-row items-center">
                <div class="md:w-1/2 mb-10 md:mb-0">
                    <h1 class="text-4xl md:text-5xl font-bold leading-tight mb-6">本地搭建私募问答智能体</h1>
                    <p class="text-xl mb-8 opacity-90">构建安全、高效、个性化的知识管理体系</p>
                    <div class="flex space-x-4">
                        <a href="#intro" class="bg-white text-indigo-600 px-6 py-3 rounded-lg font-medium hover:bg-gray-100 transition duration-300">
                            <i class="fas fa-book-open mr-2"></i>了解详情
                        </a>
                        <a href="#start" class="bg-indigo-700 text-white px-6 py-3 rounded-lg font-medium hover:bg-indigo-800 transition duration-300">
                            <i class="fas fa-play mr-2"></i>开始搭建
                        </a>
                    </div>
                </div>
                <div class="md:w-1/2 flex justify-center">
                    <img src="https://cdn.nlark.com/yuque/0/2025/png/21449790/1744946287789-25fd2a5a-0656-4221-ba3f-1ae6559b87ed.png" alt="知识库智能体" class="rounded-lg shadow-2xl w-full max-w-md">
                </div>
            </div>
        </div>
    </section>

    <!-- Introduction Section -->
    <section id="intro" class="py-20 bg-white">
        <div class="container mx-auto px-6 max-w-5xl">
            <div class="text-center mb-16">
                <h2 class="text-3xl font-bold mb-4">为什么选择本地知识库?</h2>
                <p class="text-gray-600 max-w-2xl mx-auto">与直接调用通用大模型相比，本地化知识管理系统提供了无可比拟的优势</p>
            </div>
            
            <div class="grid md:grid-cols-3 gap-8 mb-16">
                <div class="bg-gray-50 p-6 rounded-xl feature-card transition duration-300">
                    <div class="text-indigo-600 mb-4">
                        <i class="fas fa-shield-alt text-3xl"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-3">数据完全自主可控</h3>
                    <p class="text-gray-600">避免敏感信息外泄，确保隐私安全</p>
                </div>
                <div class="bg-gray-50 p-6 rounded-xl feature-card transition duration-300">
                    <div class="text-indigo-600 mb-4">
                        <i class="fas fa-project-diagram text-3xl"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-3">个性化知识图谱</h3>
                    <p class="text-gray-600">根据需求构建专属的知识网络</p>
                </div>
                <div class="bg-gray-50 p-6 rounded-xl feature-card transition duration-300">
                    <div class="text-indigo-600 mb-4">
                        <i class="fas fa-bolt text-3xl"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-3">离线快速响应</h3>
                    <p class="text-gray-600">不受网络影响，即时获取知识</p>
                </div>
            </div>

            <div class="mb-16">
                <h3 class="text-2xl font-semibold mb-6">核心应用场景</h3>
                <div class="grid md:grid-cols-2 gap-6">
                    <div class="bg-gray-50 p-6 rounded-lg">
                        <h4 class="text-lg font-medium flex items-center mb-3">
                            <i class="fas fa-gavel text-indigo-600 mr-2"></i> 法律文书管理
                        </h4>
                        <p class="text-gray-600">律师可将经手的案件资料、司法解释等构建为私有库，快速检索类似案例参考，同时确保客户隐私数据不外流</p>
                    </div>
                    <div class="bg-gray-50 p-6 rounded-lg">
                        <h4 class="text-lg font-medium flex items-center mb-3">
                            <i class="fas fa-heartbeat text-indigo-600 mr-2"></i> 医疗健康档案
                        </h4>
                        <p class="text-gray-600">医生个人可建立典型病例库，患者可搭建个人健康档案（检查报告、用药记录等），实现精准的病史追溯</p>
                    </div>
                    <div class="bg-gray-50 p-6 rounded-lg">
                        <h4 class="text-lg font-medium flex items-center mb-3">
                            <i class="fas fa-flask text-indigo-600 mr-2"></i> 学术研究资料库
                        </h4>
                        <p class="text-gray-600">研究人员将实验数据、文献笔记、未发表成果等系统归档，形成专属知识网络</p>
                    </div>
                    <div class="bg-gray-50 p-6 rounded-lg">
                        <h4 class="text-lg font-medium flex items-center mb-3">
                            <i class="fas fa-building text-indigo-600 mr-2"></i> 企业内部知识沉淀
                        </h4>
                        <p class="text-gray-600">各部门专业知识积累，如技术解决方案库、客户需求数据库、面试评估档案等</p>
                    </div>
                </div>
            </div>

            <div class="bg-indigo-50 p-6 rounded-xl">
                <p class="text-lg drop-cap">这些场景都涉及专业性强、隐私要求高的知识内容，既需要智能化的检索分析能力，又必须保证数据安全性。本地化部署的知识库系统恰好能平衡这两方面需求，成为个人和专业工作者的"第二大脑"。</p>
            </div>
        </div>
    </section>

    <!-- Cherry Studio Section -->
    <section class="py-20 bg-gray-50">
        <div class="container mx-auto px-6 max-w-5xl">
            <div class="flex flex-col md:flex-row items-center mb-16">
                <div class="md:w-1/2 mb-10 md:mb-0">
                    <h2 class="text-3xl font-bold mb-6">Cherry Studio</h2>
                    <p class="text-xl text-gray-700 mb-6">一款面向个人与企业的 <span class="font-semibold highlight">本地化知识管理及智能问答系统搭建工具</span>，支持私有化部署，兼顾数据安全与AI能力。</p>
                    <a href="https://cherry-ai.com/" class="inline-flex items-center text-indigo-600 font-medium hover:text-indigo-800 transition duration-300">
                        访问官网 <i class="fas fa-external-link-alt ml-2"></i>
                    </a>
                </div>
                <div class="md:w-1/2">
                    <div class="bg-white p-6 rounded-xl shadow-md">
                        <h3 class="text-xl font-semibold mb-4">核心特点</h3>
                        <ul class="space-y-3">
                            <li class="flex items-start">
                                <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                                <span>完全离线运行：数据存储于本地，无需上传云端</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                                <span>轻量化部署：普通笔记本电脑即可运行</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                                <span>自然语言交互：支持类似ChatGPT的对话式检索</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>

            <div class="mb-16">
                <h3 class="text-2xl font-semibold mb-6">核心功能详解</h3>
                <div class="space-y-8">
                    <div>
                        <h4 class="text-xl font-medium mb-4 flex items-center">
                            <i class="fas fa-database text-indigo-600 mr-2"></i> 知识库构建与管理
                        </h4>
                        <ul class="grid md:grid-cols-2 gap-4">
                            <li class="flex items-start">
                                <i class="fas fa-circle text-indigo-300 text-xs mt-2 mr-2"></i>
                                <span>多格式导入：支持TXT、PDF、Word、Excel、网页等</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-circle text-indigo-300 text-xs mt-2 mr-2"></i>
                                <span>智能结构化：自动提取文本关键信息</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-circle text-indigo-300 text-xs mt-2 mr-2"></i>
                                <span>手动标注：添加标签、注释构建知识图谱</span>
                            </li>
                        </ul>
                    </div>
                    <div>
                        <h4 class="text-xl font-medium mb-4 flex items-center">
                            <i class="fas fa-comments text-indigo-600 mr-2"></i> 智能问答引擎
                        </h4>
                        <ul class="grid md:grid-cols-2 gap-4">
                            <li class="flex items-start">
                                <i class="fas fa-circle text-indigo-300 text-xs mt-2 mr-2"></i>
                                <span>语义搜索：支持自然语言提问</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-circle text-indigo-300 text-xs mt-2 mr-2"></i>
                                <span>上下文理解：基于本地知识库内容生成回答</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-circle text-indigo-300 text-xs mt-2 mr-2"></i>
                                <span>多轮对话：可连续追问细化需求</span>
                            </li>
                        </ul>
                    </div>
                    <div>
                        <h4 class="text-xl font-medium mb-4 flex items-center">
                            <i class="fas fa-puzzle-piece text-indigo-600 mr-2"></i> 扩展能力
                        </h4>
                        <ul class="grid md:grid-cols-2 gap-4">
                            <li class="flex items-start">
                                <i class="fas fa-circle text-indigo-300 text-xs mt-2 mr-2"></i>
                                <span>API接口：与企业内部系统对接</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-circle text-indigo-300 text-xs mt-2 mr-2"></i>
                                <span>插件生态：集成OCR、语音输入等工具</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>

            <div class="mb-16">
                <h3 class="text-2xl font-semibold mb-6">适用人群与场景</h3>
                <div class="overflow-x-auto">
                    <table class="min-w-full bg-white rounded-lg overflow-hidden">
                        <thead class="bg-indigo-600 text-white">
                            <tr>
                                <th class="py-3 px-4 text-left">用户类型</th>
                                <th class="py-3 px-4 text-left">典型使用场景</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-200">
                            <tr>
                                <td class="py-3 px-4 font-medium">个人用户</td>
                                <td class="py-3 px-4">管理读书笔记、学术文献、个人日记</td>
                            </tr>
                            <tr>
                                <td class="py-3 px-4 font-medium">专业人士</td>
                                <td class="py-3 px-4">律师案例库、医生病历库、设计师素材库</td>
                            </tr>
                            <tr>
                                <td class="py-3 px-4 font-medium">中小企业</td>
                                <td class="py-3 px-4">内部Wiki、产品手册、客户服务知识库</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <div class="mb-8">
                <h3 class="text-2xl font-semibold mb-6">对比通用大模型的优势</h3>
                <div class="overflow-x-auto">
                    <table class="min-w-full bg-white rounded-lg overflow-hidden">
                        <thead class="bg-indigo-600 text-white">
                            <tr>
                                <th class="py-3 px-4 text-left">维度</th>
                                <th class="py-3 px-4 text-left">Cherry Studio（本地知识库）</th>
                                <th class="py-3 px-4 text-left">ChatGPT等通用模型</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-200">
                            <tr>
                                <td class="py-3 px-4 font-medium">数据隐私</td>
                                <td class="py-3 px-4">
                                    <span class="inline-flex items-center text-green-600">
                                        <i class="fas fa-check-circle mr-1"></i> 完全本地化，无泄露风险
                                    </span>
                                </td>
                                <td class="py-3 px-4">
                                    <span class="inline-flex items-center text-red-500">
                                        <i class="fas fa-times-circle mr-1"></i> 依赖云端传输
                                    </span>
                                </td>
                            </tr>
                            <tr>
                                <td class="py-3 px-4 font-medium">回答准确性</td>
                                <td class="py-3 px-4">
                                    <span class="inline-flex items-center text-green-600">
                                        <i class="fas fa-check-circle mr-1"></i> 基于自有数据，无虚构内容
                                    </span>
                                </td>
                                <td class="py-3 px-4">
                                    <span class="inline-flex items-center text-red-500">
                                        <i class="fas fa-times-circle mr-1"></i> 可能生成错误信息
                                    </span>
                                </td>
                            </tr>
                            <tr>
                                <td class="py-3 px-4 font-medium">定制化</td>
                                <td class="py-3 px-4">
                                    <span class="inline-flex items-center text-green-600">
                                        <i class="fas fa-check-circle mr-1"></i> 可深度适配专业领域
                                    </span>
                                </td>
                                <td class="py-3 px-4">
                                    <span class="inline-flex items-center text-red-500">
                                        <i class="fas fa-times-circle mr-1"></i> 通用性优先
                                    </span>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </section>

    <!-- SiliconFlow Section -->
    <section class="py-20 bg-white">
        <div class="container mx-auto px-6 max-w-5xl">
            <div class="flex flex-col md:flex-row items-center mb-16">
                <div class="md:w-1/2 mb-10 md:mb-0">
                    <h2 class="text-3xl font-bold mb-6">硅基流动</h2>
                    <p class="text-xl text-gray-700 mb-6">硅基流动（SiliconFlow）是一家专注于 <span class="font-semibold highlight">AI 算力优化</span> 和 <span class="font-semibold highlight">大模型推理加速</span> 的技术公司，提供高性能、低延迟的 AI 推理加速服务。</p>
                    <a href="https://siliconflow.cn/zh-cn/" class="inline-flex items-center text-indigo-600 font-medium hover:text-indigo-800 transition duration-300">
                        访问官网 <i class="fas fa-external-link-alt ml-2"></i>
                    </a>
                </div>
                <div class="md:w-1/2">
                    <div class="bg-gray-50 p-6 rounded-xl">
                        <h3 class="text-xl font-semibold mb-4">大模型推理加速 API</h3>
                        <div class="space-y-4">
                            <div>
                                <h4 class="font-medium text-gray-700 mb-2">支持模型：</h4>
                                <ul class="grid md:grid-cols-2 gap-2">
                                    <li class="flex items-start">
                                        <i class="fas fa-circle text-indigo-300 text-xs mt-2 mr-2"></i>
                                        <span>LLM（大语言模型）</span>
                                    </li>
                                    <li class="flex items-start">
                                        <i class="fas fa-circle text-indigo-300 text-xs mt-2 mr-2"></i>
                                        <span>CV（计算机视觉）</span>
                                    </li>
                                    <li class="flex items-start">
                                        <i class="fas fa-circle text-indigo-300 text-xs mt-2 mr-2"></i>
                                        <span>多模态模型</span>
                                    </li>
                                </ul>
                            </div>
                            <div>
                                <h4 class="font-medium text-gray-700 mb-2">优化技术：</h4>
                                <ul class="grid md:grid-cols-2 gap-2">
                                    <li class="flex items-start">
                                        <i class="fas fa-circle text-indigo-300 text-xs mt-2 mr-2"></i>
                                        <span>算子融合</span>
                                    </li>
                                    <li class="flex items-start">
                                        <i class="fas fa-circle text-indigo-300 text-xs mt-2 mr-2"></i>
                                        <span>动态批处理</span>
                                    </li>
                                    <li class="flex items-start">
                                        <i class="fas fa-circle text-indigo-300 text-xs mt-2 mr-2"></i>
                                        <span>量化加速</span>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="grid md:grid-cols-2 gap-8 mb-16">
                <div class="bg-gray-50 p-6 rounded-xl">
                    <h3 class="text-xl font-semibold mb-4 flex items-center">
                        <i class="fas fa-network-wired text-indigo-600 mr-2"></i> 分布式推理 API
                    </h3>
                    <ul class="space-y-2">
                        <li class="flex items-start">
                            <i class="fas fa-circle text-indigo-300 text-xs mt-2 mr-2"></i>
                            <span>多 GPU/多节点并行计算</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-circle text-indigo-300 text-xs mt-2 mr-2"></i>
                            <span>自动负载均衡</span>
                        </li>
                    </ul>
                </div>
                <div class="bg-gray-50 p-6 rounded-xl">
                    <h3 class="text-xl font-semibold mb-4 flex items-center">
                        <i class="fas fa-cloud-upload-alt text-indigo-600 mr-2"></i> 模型托管与部署 API
                    </h3>
                    <ul class="space-y-2">
                        <li class="flex items-start">
                            <i class="fas fa-circle text-indigo-300 text-xs mt-2 mr-2"></i>
                            <span>一键部署自定义模型</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-circle text-indigo-300 text-xs mt-2 mr-2"></i>
                            <span>弹性伸缩，按需调整算力</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </section>

    <!-- Start Building Section -->
    <section id="start" class="py-20 bg-gray-50">
        <div class="container mx-auto px-6 max-w-5xl">
            <div class="text-center mb-16">
                <h2 class="text-3xl font-bold mb-4">开始搭建</h2>
                <p class="text-gray-600 max-w-2xl mx-auto">本地知识库的完整流程是：个人通过Cherry Studio发送文字，它调用大模型来处理本地文件得到结果</p>
            </div>

            <div class="mb-16">
                <div class="code-block mb-8">
                    <div class="code-header">
                        <span>系统架构</span>
                        <span>Java</span>
                    </div>
                    <pre class="p-4 text-gray-200 overflow-x-auto"><code>个人--》Cherry Studio--》大模型(硅基流动)--》本地文件</code></pre>
                </div>

                <div class="grid md:grid-cols-2 gap-8">
                    <div>
                        <h3 class="text-xl font-semibold mb-4 flex items-center">
                            <i class="fas fa-download text-indigo-600 mr-2"></i> Cherry Studio
                        </h3>
                        <p class="text-gray-600 mb-4">它是UI工具，需要提前下载到本地安装好。</p>
                    </div>
                    <div>
                        <h3 class="text-xl font-semibold mb-4 flex items-center">
                            <i class="fas fa-key text-indigo-600 mr-2"></i> 硅基流动
                        </h3>
                        <p class="text-gray-600 mb-4">它是个大模型的API，里面有很多的免费的大模型，需要提前注册一个账号。</p>
                    </div>
                </div>
            </div>

            <div class="mb-16">
                <h3 class="text-2xl font-semibold mb-6">1、配置API KEY</h3>
                <div class="space-y-10">
                    <div>
                        <h4 class="text-xl font-medium mb-4 flex items-center">
                            <i class="fas fa-key text-indigo-600 mr-2"></i> 在硅基流动获取API KEY
                        </h4>
                        <div class="code-block mb-4">
                            <div class="code-header">
                                <span>API获取地址</span>
                                <span>URL</span>
                            </div>
                            <pre class="p-4 text-gray-200 overflow-x-auto"><code>https://cloud.siliconflow.cn/account/ak</code></pre>
                        </div>
                        <img src="https://cdn.nlark.com/yuque/0/2025/png/21449790/1744883008584-be2b2708-84ea-4918-b430-58788d81e4e8.png" alt="硅基流动API KEY获取" class="rounded-lg shadow-md w-full">
                        <p class="mt-4 text-gray-600">
                            <span class="font-medium">我们要选择的模型：</span> deepseek-ai/DeepSeek-R1-Distill-Qwen-7B
                        </p>
                        <img src="https://cdn.nlark.com/yuque/0/2025/png/21449790/1744882918798-e2b9b189-60d6-4baf-b027-77cdf11e0d34.png" alt="模型选择" class="rounded-lg shadow-md w-full mt-4">
                    </div>
                    <div>
                        <h4 class="text-xl font-medium mb-4 flex items-center">
                            <i class="fas fa-key text-indigo-600 mr-2"></i> 在Cherry Studio配置API KEY
                        </h4>
                        <p class="text-gray-600 mb-4">把复制号的API KEY贴到这里</p>
                        <img src="https://cdn.nlark.com/yuque/0/2025/png/21449790/1744883153498-d31b6f65-6063-4e06-bc04-0e69c853122d.png" alt="Cherry Studio配置API KEY" class="rounded-lg shadow-md w-full">
                    </div>
                </div>
            </div>

            <div class="mb-16">
                <h3 class="text-2xl font-semibold mb-6">2、创建本地知识库</h3>
                <div class="space-y-4">
                    <div class="flex items-start">
                        <div class="bg-indigo-100 text-indigo-800 rounded-full w-8 h-8 flex items-center justify-center flex-shrink-0 mr-4">1</div>
                        <div>
                            <h4 class="text-lg font-medium mb-2">添加本地知识库</h4>
                            <p class="text-gray-600 mb-4">点击添加知识库按钮开始创建</p>
                            <img src="https://cdn.nlark.com/yuque/0/2025/png/21449790/1744883302038-16708432-31ba-4d3a-b152-a271423f2f18.png" alt="添加知识库" class="rounded-lg shadow-md w-full">
                        </div>
                    </div>
                    <div class="flex items-start">
                        <div class="bg-indigo-100 text-indigo-800 rounded-full w-8 h-8 flex items-center justify-center flex-shrink-0 mr-4">2</div>
                        <div>
                            <h4 class="text-lg font-medium mb-2">设置知识库的名字和嵌入模型</h4>
                            <img src="https://cdn.nlark.com/yuque/0/2025/png/21449790/1744883580024-0fc8abf5-01ab-4006-aba2-b1d3de284426.png" alt="设置知识库" class="rounded-lg shadow-md w-full">
                        </div>
                    </div>
                    <div class="flex items-start">
                        <div class="bg-indigo-100 text-indigo-800 rounded-full w-8 h-8 flex items-center justify-center flex-shrink-0 mr-4">3</div>
                        <div>
                            <h4 class="text-lg font-medium mb-2">上传文件到知识库</h4>
                            <p class="text-gray-600 mb-4">选择需要上传的PDF文件</p>
                            <div class="grid md:grid-cols-2 gap-4">
                                <img src="https://cdn.nlark.com/yuque/0/2025/png/21449790/1744883722900-8ba24b80-1c75-4739-84ad-4a9025692f59.png" alt="选择文件" class="rounded-lg shadow-md">
                                <img src="https://cdn.nlark.com/yuque/0/2025/png/21449790/1744883777028-fba31d5f-c0e5-49db-a8d0-14448afcf528.png" alt="上传文件" class="rounded-lg shadow-md">
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="mb-16">
                <h3 class="text-2xl font-semibold mb-6">3、添加会话</h3>
                <div class="space-y-4">
                    <div class="flex items-start">
                        <div class="bg-indigo-100 text-indigo-800 rounded-full w-8 h-8 flex items-center justify-center flex-shrink-0 mr-4">1</div>
                        <div>
                            <h4 class="text-lg font-medium mb-2">新建会话</h4>
                            <img src="https://cdn.nlark.com/yuque/0/2025/png/21449790/1744883924609-69bca7c5-fd01-4948-ad5a-1dda511511fc.png" alt="新建会话" class="rounded-lg shadow-md w-full">
                        </div>
                    </div>
                    <div class="flex items-start">
                        <div class="bg-indigo-100 text-indigo-800 rounded-full w-8 h-8 flex items-center justify-center flex-shrink-0 mr-4">2</div>
                        <div>
                            <h4 class="text-lg font-medium mb-2">关联知识库</h4>
                            <p class="text-gray-600 mb-4">将新建的会话与之前创建的本地知识库建立关联</p>
                            <img src="https://cdn.nlark.com/yuque/0/2025/png/21449790/1744883981257-26f24094-71c4-4fbe-9f0e-ca398f5d1bc8.png" alt="关联知识库" class="rounded-lg shadow-md w-full">
                        </div>
                    </div>
                    <div class="flex items-start">
                        <div class="bg-indigo-100 text-indigo-800 rounded-full w-8 h-8 flex items-center justify-center flex-shrink-0 mr-4">3</div>
                        <div>
                            <h4 class="text-lg font-medium mb-2">设置通用提示词</h4>
                            <img src="https://cdn.nlark.com/yuque/0/2025/png/21449790/1744884030881-5e0c20c7-e802-43e6-8cb4-dc7a9cbad53e.png" alt="设置提示词" class="rounded-lg shadow-md w-full">
                        </div>
                    </div>
                    <div class="flex items-start">
                        <div class="bg-indigo-100 text-indigo-800 rounded-full w-8 h-8 flex items-center justify-center flex-shrink-0 mr-4">4</div>
                        <div>
                            <h4 class="text-lg font-medium mb-2">选择对应的大模型</h4>
                            <img src="https://cdn.nlark.com/yuque/0/2025/png/21449790/1744884133985-7b7ec749-ac23-4a93-a9f4-a20f47fafc8c.png" alt="选择大模型" class="rounded-lg shadow-md w-full">
                        </div>
                    </div>
                    <div class="flex items-start">
                        <div class="bg-indigo-100 text-indigo-800 rounded-full w-8 h-8 flex items-center justify-center flex-shrink-0 mr-4">5</div>
                        <div>
                            <h4 class="text-lg font-medium mb-2">选择知识库</h4>
                            <img src="https://cdn.nlark.com/yuque/0/2025/png/21449790/1744884175819-61ca3253-d0b6-4f0b-9393-9f454d923c00.png" alt="选择知识库" class="rounded-lg shadow-md w-full">
                        </div>
                    </div>
                    <div class="flex items-start">
                        <div class="bg-indigo-100 text-indigo-800 rounded-full w-8 h-8 flex items-center justify-center flex-shrink-0 mr-4">6</div>
                        <div>
                            <h4 class="text-lg font-medium mb-2">开始问答</h4>
                            <p class="text-gray-600 mb-4">配置完成后即可开始使用智能问答功能</p>
                            <img src="https://cdn.nlark.com/yuque/0/2025/png/21449790/1744884210205-c23caf12-a7f6-4dc9-b89f-6ff58a41f718.png" alt="开始问答" class="rounded-lg shadow-md w-full">
                        </div>
                    </div>
                </div>
            </div>

            <div class="mb-8">
                <h3 class="text-2xl font-semibold mb-6">4、测试问答功能</h3>
                <div class="space-y-6">
                    <div>
                        <h4 class="text-lg font-medium mb-2">基本问答测试</h4>
                        <div class="bg-gray-50 p-6 rounded-lg">
                            <div class="flex items-start mb-4">
                                <div class="bg-indigo-100 text-indigo-800 rounded-full w-8 h-8 flex items-center justify-center flex-shrink-0 mr-4">Q</div>
                                <div>
                                    <p class="font-medium">RabbitMQ实战指南的作者是谁？</p>
                                </div>
                            </div>
                            <div class="flex items-start">
                                <div class="bg-green-100 text-green-800 rounded-full w-8 h-8 flex items-center justify-center flex-shrink-0 mr-4">A</div>
                                <div>
                                    <p class="text-gray-600">系统会基于PDF内容给出准确答案</p>
                                </div>
                            </div>
                        </div>
                        <img src="https://cdn.nlark.com/yuque/0/2025/png/21449790/1744884324084-c5718c8d-9e42-419e-9f00-e966d13328b4.png" alt="问答测试" class="rounded-lg shadow-md w-full mt-4">
                        <p class="mt-4 text-gray-600">PDF文件内容：</p>
                        <img src="https://cdn.nlark.com/yuque/0/2025/png/21449790/1744884381143-fe05f8c4-88bf-4cbc-9671-d9e8a4af82b3.png" alt="PDF内容" class="rounded-lg shadow-md w-full mt-2">
                    </div>
                    <div>
                        <h4 class="text-lg font-medium mb-2">其他内容测试</h4>
                        <div class="bg-gray-50 p-6 rounded-lg">
                            <div class="flex items-start mb-4">
                                <div class="bg-indigo-100 text-indigo-800 rounded-full w-8 h-8 flex items-center justify-center flex-shrink-0 mr-4">Q</div>
                                <div>
                                    <p class="font-medium">测试其他问题</p>
                                </div>
                            </div>
                            <div class="flex items-start">
                                <div class="bg-green-100 text-green-800 rounded-full w-8 h-8 flex items-center justify-center flex-shrink-0 mr-4">A</div>
                                <div>
                                    <p class="text-gray-600">系统会基于本地知识库内容进行回答</p>
                                </div>
                            </div>
                        </div>
                        <img src="https://cdn.nlark.com/yuque/0/2025/png/21449790/1744884514417-5095799d-206c-494c-9575-7685e8039461.png" alt="其他问题测试" class="rounded-lg shadow-md w-full mt-4">
                        <p class="mt-4 text-gray-600">注意：系统会严格基于本地知识库内容进行回答，不会生成无关信息</p>
                        <img src="https://cdn.nlark.com/yuque/0/2025/png/21449790/1744884710624-b24ad2b9-bcab-4040-be02-fe3c06d5da76.png" alt="知识库限制" class="rounded-lg shadow-md w-full mt-4">
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer class="bg-gray-900 text-gray-300 py-12">
        <div class="container mx-auto px-6 max-w-5xl">
            <div class="text-center">
                <h3 class="text-xl font-semibold text-white mb-2">技术小馆</h3>
                <p class="mb-6">探索技术前沿，分享知识精华</p>
                <a href="http://www.yuque.com/jtostring" class="text-indigo-400 hover:text-indigo-300 transition duration-300">
                    <i class="fas fa-globe mr-1"></i> http://www.yuque.com/jtostring
                </a>
            </div>
        </div>
    </footer>

    <script>
        mermaid.initialize({
            startOnLoad: true,
            theme: 'default',
            flowchart: {
                useMaxWidth: false,
                htmlLabels: true,
                curve: 'basis'
            }
        });
    </script>
</body>
</html>
```